<template>
  <zm-view ref="view">
    <view class="cart">
      <view class="cart-item">
        <view class="flex px-22 pt-26 pb-22">
          <!-- 商品图片 -->
          <image :src="image" class="cart-img" mode="aspectFit"></image>
          <view class="flex flex-col justify-between flex-1">
            <!-- 商品名称 -->
            <view class="font-bold text-333 font-30">{{ info.name }}</view>
            <!-- 商品价格和数量添加 -->
            <view class="flex items-center">
              <view class="text-price text-price-mini-before font-30 font-bold">{{ info.sellPrice }}</view>
              <view class="cart-count flex items-center ml-auto solid-1">
                <view class="minus" @click="handleMinus">
                  <u-icon name="minus" color="#000000" bold></u-icon>
                </view>
                <view class="count solid-left-1 solid-right-1">{{ num }}</view>
                <view class="plus" @click="handlePlus">
                  <u-icon name="plus" color="#000000" bold></u-icon>
                </view>
              </view>
            </view>
          </view>
        </view>
        <!-- 商品购买限制 -->

        <view class="tip-content flex items-center px-20 py-28">
          <view class="lint"></view>
          <view class="flex items-center">
            <view class="flex items-center mr-30">
              <u-icon name="close-circle-fill" :color="themeColor" size="28rpx"></u-icon>
              <view class="font-bold ml-8">不支持退款</view>
            </view>
            <view v-if="info.purchaseQuantity > 0" class="flex items-center">
              <u-icon :name="info.purchaseQuantity == 0 ? 'checkmark-circle-fill' : 'close-circle-fill'" :color="themeColor" size="28rpx"></u-icon>
              <view class="font-bold ml-8">{{ tip }}</view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <!-- 底部按钮 -->
    <zm-footer safe-area-inset-bottom background="#fff" z-index="10">
      <view class="px-24 py-20 flex items-center">
        <view class="mr-auto font-40 font-bold text-price-mini-before text-price">{{ needPay }}</view>
        <zm-button height="100rpx" width="288rpx" text-size="32rpx" text-weight="600" type="primary" round @click="handlePay">立即付款</zm-button>
      </view>
    </zm-footer>
    <!-- 支付组件 -->
    <pay-way-popup ref="pay" :has-balance-pay="false" :has-integral-pay="false"> </pay-way-popup>
  </zm-view>
</template>

<script>
import page from "@/mixins/page"
export default {
  name: "mall-index",
  mixins: [page],
  data() {
    return {
      info: { purchaseQuantity: 0 },
      num: 1,
      image: "",
      mallCommodityId: ""
    }
  },
  computed: {
    needPay() {
      return this.$u.times(this.num, Number(this.unitPrice))
    },
    unitPrice() {
      return this.info?.sellPrice || 0
    },
    tip() {
      return this.info?.purchaseQuantity == 0 ? "不限购" : `限购${this.info.purchaseQuantity}件`
    }
  },
  onLoad(options) {
    this.mallCommodityId = options.mallCommodityId
    this.handleInfo()
  },
  methods: {
    handleInfo() {
      uni.$api.mall.getCommodityInfo({ mallCommodityId: this.mallCommodityId }).then((res) => {
        this.info = res
        this.image = res.image.length > 0 ? res.image[0].imageUrl : ""
      })
    },
    handleMinus() {
      if (this.num == 1) return
      this.num -= 1
    },
    handlePlus() {
      if (this.num == this.info.purchaseQuantity * 1) {
        return this.$toast(`限购${this.info.purchaseQuantity}份`)
      } else if (this.info.stock == this.num) {
        return this.$toast(`库存不足`)
      }
      this.num += 1
    },
    handlePay() {
      const data = {
        number: this.num,
        mallCommodityId: this.mallCommodityId
      }
      uni.$api.mall.createOrder(data).then((res) => {
        const options = {
          orderId: res.orderId,
          mallOrderId: res.orderId,
          orderType: "mall",
          preInfo: {
            needPay: this.needPay
          },
          jumpType: "reLaunch"
        }
        this.$refs.pay.open({
          ...options,
          fail: (e) => {
            this.toView({
              url: "pages/order/order-mall-info/order-mall-info",
              type: "reLaunch",
              params: {
                orderId: e.orderId
              }
            })
          }
        })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.cart {
  padding: 24rpx;
  .cart-item {
    background: #ffffff;
    border-radius: 16rpx;
    .cart-img {
      width: 206rpx;
      height: 140rpx;
      margin-right: 28rpx;
    }
    .cart-count {
      height: 48rpx;
      border-radius: 48rpx;
      .plus,
      .minus {
        width: 60rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: bold;
        font-size: 20rpx;
      }
      .count {
        width: 80rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 30rpx;
        font-weight: bold;
        color: #333;
      }
    }

    .tip-content {
      position: relative;
      .lint {
        top: 0;
        left: 24rpx;
        right: 24rpx;
        position: absolute;
        border-top: 1rpx solid #eee;
      }
      &::after,
      &::before {
        top: -12rpx;
        width: 24rpx;
        height: 24rpx;
        content: "";
        position: absolute;
        border-radius: 50%;
        background-color: var(--page-color);
      }
      &::after {
        left: -12rpx;
      }
      &::before {
        right: -12rpx;
      }
    }
  }
}
</style>
